从新回归Vue之3.0（五）：router配置，引入element |
您所在的位置：网站首页 › push menu button › 从新回归Vue之3.0（五）：router配置，引入element |
|
一，router配置以及使用详解 安装npm install vue-router@4 贴一个极度简单的vue页面模型 import { ref, reactive, watch, onMounted, computed } from "vue"; import { useStore } from "vuex"; import { useRouter } from "vue-router"; // data // props // emit // methods // watch // defineExpose // 生命周期页面具体内容： 1、layout.vue import Header from './header/index.vue';2、header.vue 首页 关于 import { useRouter } from 'vue-router'; const router = useRouter() const handleClick = (num: number)=>{ if (num) { router.push({name: 'home'}) }else router.push({name: 'about'}) }3、home.vue home4、about.vue about在src目录下创建router文件夹，然后创建index.ts文件，内容如下所示： import { createRouter, createWebHashHistory } from "vue-router"; import LayOut from "../components/layout/index.vue"; const routes = [ { path: '/', component: LayOut, redirect: '/home', children:[ { path: '/home', name: 'home', component: ()=> import("../pages/home/index.vue"), meta:{ title: '首页', icon: '' } }, { path: '/about', name: 'about', component: ()=> import("../pages/about/index.vue"), meta:{ title: '关于', icon: '' } } ] } ] const router = createRouter({ history: createWebHashHistory(), routes }) export default router在main.ts中注入router模块, 重新启动项目，访问路由，看是否正确 import { createApp } from 'vue' import App from './App.vue' import store from './store'; import router from './router'; const app = createApp(App) app.use(store) app.use(router) app.mount('#app')二，引入element-plus以及注意事项 官方文档地址：Button 按钮 | Element Plus 安装 npm install element-plus --save npm install @element-plus/icons 在main.ts 文件中引入配置 import { createApp } from 'vue' import App from './App.vue' import store from './store'; import router from './router'; // 引入ui组件 import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' // 全局注册图标使用 import { Edit,Search } from '@element-plus/icons' const app = createApp(App) app.use(store) app.use(router) app.use(ElementPlus); app.component("edit", Edit) app.component("search", Search) app.mount('#app')在home页面测试 home Primary import { ref, reactive, watch, onMounted, computed } from "vue"; import { useStore } from "vuex"; import { useRouter } from "vue-router"; import { Search } from '@element-plus/icons-vue' // data // props // emit // methods // watch // defineExpose // 生命周期
|
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
| CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |